<template>
  <div class="analyse" v-loading="loading">
    <div class="top">
      <div class="search">
        <div class="contition">
          <div class="wrap_time">
            <span class="ques">{{$t('report.questionSort')}}</span>
            <el-select v-model="questionType" :placeholder="$t('public.pleasePick')" size="mini">
              <el-option
                      v-for="item in questionOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" class="primary_btn fr find" @click.stop='search'>{{$t('public.search2')}}</el-button>
            <div class="clear"></div></div>
        </div>
      </div>
      <affix :label="title"></affix>
    </div>
    <div :id = "id">
      <div class="tab">
        <div class="export">

          <!-- <el-button class="primary_btn fr report_excel_btn"
            v-if="$store.getters.exportFromEnd"
            @click.stop="exportXls"
          >{{$t('report.exportXls')+($store.state.xlsxExportMode==='Both'?'(旧)':'')}}</el-button> -->

          <el-button class="primary_btn fr report_excel_btn"
            @click.stop="exportXlsx"
          >{{$t('report.exportXls')}}</el-button>
        </div>
        <report-table :data="tableData" :config="headOptions"></report-table>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('report.reportExportHelp')" :visible.sync="dialogVisible" width="30%">
      <span>{{$t('report.reportExportTipTitle')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="dialogVisible = false">{{$t('public.cancel')}}</el-button>
        <el-button class="primary_btn" type="primary" @click="confirm">{{$t('public.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import affix from '../../../ui-modules/affix/Affix.vue'
  import dateTime from '../base/datetime.vue'
  import reportTable from '../base/reportTable.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  import { filter } from 'lodash'
  import { exportReportPdf, headOptionsToXlsxHeaders } from '@/utils/reportUtils.js'
  import * as XlsxUtil from 'src/utils/XlsxUtil.umd.js'
  export default {
    name: 'robot_report_top20',
    data () {
      return {
        loading: false,
        id: 'robot_report_top20',
        title: this.$t('report.robotReportTop20'),
        dialogVisible: false,
        serverData: [],
        questionType: '',
        questionOptions: [],
        headOptions: [{
          'order': '1',
          'name': 'no',
          'displayname': this.$t('report.paiming'),
          'show': true
        }, {
          'order': '2',
          'name': 'name',
          'displayname': this.$t('report.normalQuestion'),
          'show': true
        }, {
          'order': '3',
          'name': 'type',
          'displayname': this.$t('report.sort'),
          'show': true
        }, {
          'order': '4',
          'name': 'hits',
          'displayname': this.$t('report.hitsNumber'),
          'show': true
        }]
      }
    },
    components: {
      affix,
      dateTime,
      reportTable
    },
    computed: {
      tableData () {
        if (!this.serverData || this.serverData.length === 0) {
          return []
        }
        let data = deepClone(this.serverData)
        return data
      }
    },
    methods: {
      searchOrExport (isExport) {
        this.loading = true
        this.$store.dispatch('queryRobotTop20Report', {questionType: this.questionType}).then((res) => {
          let metaData = deepClone(res.list)
          metaData.forEach((item, index) => {
            item.no = index + 1
            item.type = this.getTypeNameById(item.type) || this.$t('public.all')
            if (!item.hits || item.hits < 1) {
              item.hits = 0
            }
          })
          this.loading = false
          if (isExport) {
            if (!metaData || metaData === 0) {
              metaData = []
            }
            metaData = deepClone(metaData)
            var headOptions = deepClone(this.headOptions)
            var headers = headOptionsToXlsxHeaders(headOptions)

            var dh = XlsxUtil.getDownloadHelper(headers, metaData)
            var timeStamp = XlsxUtil.dateFormat(new Date(), 'yyyy-MM-dd hh-mm-ss')
            dh.download(this.$t('report.robotReportTop20') + timeStamp)
          } else {
            this.serverData = metaData
          }
        })
      },
      search () {
        this.searchOrExport()
      },
      exportXlsx () {
        this.searchOrExport(true)
      },
      exportXls () {
        let data = {
          Method: 'exportRobotTop20Excel',
          Query: {
            reportType: this.id,
            questionType: this.questionType,
            accountId: this.$store.state.session.user.account
          }
        }
        this.$store.dispatch('exportRobotMessageExcel', data)
      },
      exportPdf () {
        this.dialogVisible = true
      },
      confirm () {
        this.dialogVisible = false
        exportReportPdf({title: this.$t('report.robotReportTop20Search'), id: this.id})
      },
      getTypeNameById (typeId) {
        let options = filter(this.questionOptions, {value: typeId})
        if (options[0]) {
          return options[0].label
        }
        return ''
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'quesTypes'}).then(types => {
        this.questionOptions = types.map(type => ({label: type.name, value: type._id}))
        this.questionOptions.forEach((question) => {
          if (question.label === '全部') {
            question.value = ''
          }
        })
        this.questionType = this.questionOptions[0].value
        this.search()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .analyse
    .search
      .ques
        margin-right 20px
</style>
